<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			.wrap {
				width: 500px;
				margin: 100px auto 0;
			}
			
			table {
				border-collapse: collapse;
				border-spacing: 0;
				border: 1px solid #c0c0c0;
				width: 500px;
			}
			
			th,
			td {
				border: 1px solid #fff;
				color: #404060;
				padding: 10px;
			}
			
			th {
				background-color: #09c;
				font: bold 16px "微软雅黑";
				color: #fff;
			}
			
			td {
				font: 14px "微软雅黑";
				text-align: center;
			}
			
			/*tbody tr {
				background-color: #f0f0f0;
			}
			
			tbody tr:nth-child(odd) {
				background-color: #ededed;
			}
			
			tbody tr:nth-child(even) {
				background-color: #d0d0d0;
			}
			
			tbody tr:hover {
				cursor: pointer;
				background-color: #DEB887;
			}*/
		</style>
	</head>

	<body>
		<div class="wrap">
			<table>
				<thead>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>课程</th>
						<th>成绩</th>
					</tr>
				</thead>
				<tbody id="j_tb">
					<tr>
						<td>
							1
						</td>
						<td>柳岩</td>
						<td>语文</td>
						<td>100</td>

					</tr>
					<tr>
						<td>
							2
						</td>
						<td>苍老师</td>
						<td>日语</td>
						<td>100</td>
					</tr>
					<tr>
						<td>
							3
						</td>
						<td>凤姐</td>
						<td>营销学</td>
						<td>100</td>
					</tr>
					<tr>
						<td>
							4
						</td>
						<td>张飞</td>
						<td>数学</td>
						<td>10</td>
					</tr>
					<tr>
						<td>
							5
						</td>
						<td>小沈阳</td>
						<td>英语</td>
						<td>100</td>
					</tr>
					<tr>
						<td>
							6
						</td>
						<td>马户</td>
						<td>体育</td>
						<td>100</td>
					</tr>
				</tbody>
			</table>
		</div>
		<script type="text/javascript">
			var j_tb = document.getElementById("j_tb");
			var trs = j_tb.getElementsByTagName('tr');
			var bgc;
			for(i=0;i<trs.length;i++){
				if(i%2 == 0){
					trs[i].style.background = "#ededed";
				}else{
					trs[i].style.background = "#d0d0d0";
				}
				trs[i].onmouseover = function(){
					bgc = this.style.background;
					this.style.background = "#DEB887";
				};
				trs[i].onmouseout = function(){
					this.style.background = bgc;
				};
			}
			
		</script>
	</body>

</html>